<template>
  <div id="house-item">
      <div class="item">
          <div class="img">
              <img :src="data.image.url" alt="">
          </div>
          <div class="info">
            <span class="location">
              <van-icon name="location-o" />
              {{data.location}}
            </span>
            <span class="text">{{data.houseName}}</span>
              <span class="title">{{data.summaryText}}</span>
              <span class="price">
                  <div>￥{{data.finalPrice}}</div>
                  <span>￥{{data.productPrice}}</span>
                  <p>已减￥{{data.productPrice-data.finalPrice}}</p>
              </span>
          </div>
      </div>
  </div>
</template>
  
<script setup>
defineProps({
  data: {
      type: Object,
      default: () => ({})
  }
})
const numberStart = (n)=>{
  return Number(n)
}
</script>
   
<style lang="less" scoped>
#house-item {
  margin-bottom: 10px;
  .item {
      position: relative;
      .img {
          width: 162px;

          img {
              width: 100%;
              height: 120px;
              border-radius: 5px;
          }
      }

      .info {
          width: 160px;
          padding: 5px;
          box-sizing: border-box;
          bottom: 0;
          left: 0;
          color: rgb(106, 100, 100);
          font-size: 14px;
          line-height: 1.2;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          span{
              margin: 3px 0;
          }
          .title{
              font-size: 12px;
          }
          .text {
              word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              /* 这里是超出几行省略 */
              overflow: hidden;
          }
          .price{
            color: rgb(229, 211, 74);
            font-size: 13px;
            display: flex;
            align-items: center;
            span{
              color: gray;
              margin-left: 3px;
              text-decoration:line-through;
              font-size: 8px;
            }
            p{
              line-height: 1.2;
              margin-left: 3px;
              font-size: 8px;
              border-radius: 7px;
              background-color: rgba(233, 98, 98,0.7);
              color: white;
              padding: 1px 1px;
            }
          }
      }
  }
}
</style>